ul,li{
  list-style: none;
  margin: 0;
  padding: 0;
}
.hex-wrap {
  margin: 0 auto;
  position: relative;
  width: 100%;
  /* height: 1000px; */
}
.hex-wrap ul {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hex-wrap li {
  position: relative;
  /* width: 20px;
  height: 40px; */
}
.hex-wrap li span {
  /* display: block; */
}
.hex-wrap .hex-level-1, .hexIn-level-1 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: rotate(120deg);
  position: absolute;
  z-index: 1;
}
.hex-wrap .hexIn-level-1 {
  z-index: 2;
}
.hex-wrap .hex-level-2, .hexIn-level-2 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: rotate(-60deg);
}
.hex-wrap .hex-level-3, .hexIn-level-3 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: rotate(-60deg);
}
.hex-wrap .hexIn-level-3 {
  background-color: #fff;
}
.hex-wrap .hex-content {
  position: absolute;
  width: 80%;
  height: 45%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 29;
  cursor: pointer;
}
.hex-wrap .hex-center {
  position: absolute;
  z-index: 19;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hex-center {
  position: relative;
}

/* .hex-center-main, 
.hex-center-main .hex-center-top, 
.hex-center-main .hex-center-bottom {
  box-shadow: 0 0 10px 1px rgba(0,0,0,0.2);   
} */

.hex-center-top,
.hex-center-bottom {
  position: absolute;
  transform: rotate(-60deg) skewY(30deg);
}

.hex-center .hexIn-center {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}